<template>
  <!-- 头部 -->
  <van-header title="排行榜" :left-arrow="true"></van-header>
  <div class="section">
    <div class="page">
      <!-- <van-scroll ref="pulldownRef" pulldown @pullDown="handlePulldown">
        <div class="scroll-pulldown">
          <div class="pulldown-wrapper">
            <div v-show="beforePullDown">
              <span>Pull Down and refresh</span>
            </div>
            <div v-show="!beforePullDown">
              <div class="loading" v-if="isPullingDown">
                <van-loading size="24px">正在刷新...</van-loading>
              </div>
              <div v-if="!isPullingDown">
                <span>刷新成功</span>
              </div>
            </div>
          </div>
          <ul class="pulldown-list">
            <li>👇下拉并刷新</li>
            <li :key="i" class="pulldown-list-item" v-for="i in dataList">{{ `I am item ${i} ` }}</li>
          </ul>
        </div>
      </van-scroll> -->
      <van-list>
        <!-- 全部排行榜 -->
        <van-cell v-for="(item, index) in ranks" :key="index" center @click="handleClick(item)">
          <template #icon>
            <img v-lazy="item.coverImgUrl" />
          </template>
          <template #title>
            <div v-if="item.ToplistType">
              <div v-for="(itemIn, indexIn) in item.tracks" :key="indexIn">
                <i class="index">{{ indexIn + 1 }}</i>
                <span class="name">{{ itemIn.first }}</span>
                <span class="author">{{ itemIn.second }}</span>
              </div>
            </div>
            <div v-else>
              <p class="desc">{{ item.description || item.name }}</p>
              <p class="update">
                <van-tag color="#ec4141" plain v-for="itemIn in item.tags" :key="itemIn">{{ itemIn }}</van-tag>
                <span>{{ item.updateFrequency }}</span>
              </p>
            </div>
          </template>
        </van-cell>
        <!-- 歌手榜 -->
        <van-cell center>
          <template #icon>
            <img v-lazy="artistTops.coverUrl" />
          </template>
          <template #title>
            <div>
              <p class="desc">{{ artistTops.description || artistTops.name }}</p>
              <p class="singer">
                <span v-for="(item, index) in artistTops.artists" :key="item.first"
                  >{{ index + 1 }}.{{ item.first }}</span
                >
              </p>
              <p class="update">{{ artistTops.updateFrequency }}</p>
            </div>
          </template>
        </van-cell>
        <!-- 赞赏榜 -->
        <van-cell center>
          <template #icon>
            <img v-lazy="rewardTops.coverUrl" />
          </template>
          <template #title>
            <div v-for="(item, index) in rewardTops.songs" :key="index">
              <i class="index">{{ index + 1 }}</i>
              <span class="name">{{ item.name }}</span>
              <span class="author">{{ item.artists[0].name }}</span>
            </div>
          </template>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import VanHeader from '@/components/header/Header.vue';
import VanScroll from '@/components/scroll/Scroll.vue';
import { useMyRouters } from '@/router';
import { shuffle } from '@/util';
import ranklist from '../../api/mock/rank.json';
import { getTopDetail } from '../../api/wangyi/rank';

const dataList = ref();
const beforePullDown = ref(true);
const isPullingDown = ref(false);
const pulldownRef = ref();
const num = ref(0);

const ranks = ref(ranklist.list);
const artistTops = ref(ranklist.artistToplist);
const rewardTops = ref(ranklist.rewardToplist);

const { router } = useMyRouters();

onMounted(() => {
  dataList.value = generateData(num.value);
});

// 跳转到详情页
function handleClick(item) {
  router.push({
    path: '/recomdetail',
    query: {
      id: item.id || item.creativeId
    }
  });
}

function generateData(p) {
  let ret = [];
  for (let i = p; i <= 10 * (p + 1); i++) {
    ret.push(i);
  }
  return ret;
}

// 触发下拉操作
async function handlePulldown() {
  console.log('trigger pullDown');
  beforePullDown.value = false;
  isPullingDown.value = true;

  num.value++;

  await requestData();

  isPullingDown.value = false;
  finishPullDown();
}
async function finishPullDown() {
  pulldownRef.value.finishPullDown();
  setTimeout(() => {
    beforePullDown.value = true;
    pulldownRef.value.refresh();
  }, 2000);
}
async function requestData() {
  try {
    const newData = await ajaxGet(/* url */);
    // dataList.value = newData.concat(dataList.value);
    dataList.value = shuffle(dataList.value);
  } catch (err) {
    console.log(err);
  }
}
function ajaxGet(/* url */) {
  return new Promise(resolve => {
    setTimeout(() => {
      const dataList = generateData(num.value);
      resolve(dataList);
    }, 1000);
  });
}
</script>

<style lang="less" scoped>
.loading {
  margin-top: 0;
}
.van-list {
  .van-cell {
    padding: 0;
    margin-bottom: 15px;
    background: #f8f8f8;
    border-radius: 10px;
    overflow: hidden;
    img {
      width: 90px;
      height: 90px;
      // border-radius: 10px 0 0;
      padding-right: 5px;
    }
    .van-cell__title {
      div {
        line-height: 25px;
        i.index {
          font-style: normal;
          padding-right: 5px;
          font-size: 16px;
        }
        span.name {
          // font-size: 15px;
          font-weight: bold;
        }
        span.author {
          padding-left: 5px;
          color: #808080;
          font-size: 12px;
        }
        .desc {
          // padding-left: 5px;
          max-width: 240px;
          white-space: normal;
          font-size: 16px;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .update {
          // padding-left: 5px;
          span {
            margin-right: 5px;
          }
        }
        .singer {
          // padding-left: 5px;
          span {
            margin-right: 10px;
          }
        }
      }
    }
  }
}
// .page {
//   overflow: hidden;
// }
.scroll {
  height: 200px;
  position: relative;

  li {
    height: 40px;
    font-size: 16px;
    line-height: 40px;
  }

  .pulldown-list {
  }

  .pulldown-wrapper {
    position: absolute;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    transform: translateY(-100%) translateZ(0);
    text-align: center;
    color: #999;
  }
}
</style>
